<template>
  <div class="container">
    <el-card class="tags-container" >
       <el-breadcrumb
        separator-class="el-icon-arrow-right"
        v-if="subjects.id && subjects.name"
      >
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{
          subjects.id ? subjects.name : ""
        }}</el-breadcrumb-item>
        <el-breadcrumb-item>标签管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 搜索 -->
      <el-row style="margin-top:20px">
        <el-col :span="18">
          <el-form ref="formData">
            <el-form :inline="true" :model="tagsSearch">
              <el-form-item size="small" label="标签名称">
                <el-input v-model="tagsSearch.tagName" />
              </el-form-item>
              <el-form-item size="small" label="状态">
                <el-select v-model="tagsSearch.state" placeholder="请选择">
                  <el-option label="启用" value="1" />
                  <el-option label="禁用" value="0" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button size="small" @click="resetForm">清除</el-button>
                <el-button type="primary" size="small" @click="getTagsList"
                  >查询</el-button
                >
              </el-form-item>
            </el-form>
          </el-form>
        </el-col>
        <el-col :span="6" style="text-align: right">
           <el-button
            v-if="subjects.id && subjects.name"
            type="text"
            class="colright"
            icon="el-icon-back"
            @click="$router.back()"
            >返回学科</el-button
          >
          <el-button
            type="success"
            size="small"
            icon="el-icon-edit"
            @click="dialogVisible = true"
            >新增标签</el-button
          >

        </el-col>
      </el-row>
      <!-- 提示消息 -->
      <el-alert
        show-icon
        :title="`数据一共 ${tagsPage.total} 条`"
        :closable="false"
      />
      <!-- 表格 -->
      <el-table :data="tagsList" >
        <el-table-column type="index" label="序号" width="110%" />
        <el-table-column
          prop="subjectName"
          label="所属学科"
          :show-overflow-tooltip="true"
          width="180%"
        />
        <el-table-column prop="tagName" label="标签名称" width="160%" />
        <el-table-column prop="username" label="创建者" width="210%" />
        <el-table-column
          prop="addDate"
          :formatter="formateTime"
          label="创建日期"
          width="210%"
        />
        <el-table-column
          prop="state"
          :formatter="formateState"
          label="状态"
          width="160%"
        />
        <el-table-column prop="" label="操作" width="210%">
          <template slot-scope="{ row }">
            <el-button type="text" @click="changeState(row)">{{
              row.state === 0 ? "启用" : "禁用"
            }}</el-button>
            <el-button
              type="text"
              :disabled="row.state === 0"
              @click="editTags(row)"
              >修改</el-button
            >
            <el-button
              type="text"
              :disabled="row.state === 0"
              @click="deleteArticle(row)"
            >
              删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="end" align="middle" style="height: 60px">
        <el-pagination
          hide-on-single-page
          background
          layout="prev, pager, next, jumper"
          :current-page="tagsPage.page"
          :page-size="tagsPage.pagesize"
          :total="tagsPage.total"
          @current-change="changePage"
        />
      </el-row>
    </el-card>
    <!-- 弹出层 -->
    <el-dialog
      :title="tagsInfo.id ? '编辑目录' : '新增目录'"
      :visible="dialogVisible"
      width="400px"
      @close="handleClose"
    >
      <el-form
        ref="tagsInfo"
        :model="tagsInfo"
        :rules="rules"
        label-width="auto"
        size="small"
      >
        <el-form-item label="所属学科" prop="subjectID">
          <el-select v-model="tagsInfo.subjectID" placeholder="请选择">
            <el-option
              v-for="item in subjectList"
              :key="item.id"
              :label="item.subjectName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="tagName">
          <el-input v-model="tagsInfo.tagName" placeholder="请输入目录名称" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="btnOk">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  list,
  changeState,
  remove,
  add,
  detail,
  update
} from '@/api/hmmm/tags'
import { list as subjectList } from '@/api/hmmm/subjects'
import dayjs from 'dayjs'
export default {
  data () {
    return {
      dialogVisible: false,
      tagsSearch: {
        // subjectID: "",
        tagName: '',
        state: ''
      },
      tagsPage: {
        page: 1,
        pagesize: 7,
        total: 0,
        subjectID: ''
      },
      tagsList: [], // 数据列表
      pageLength: '',
      newState: 1, // 文章状态
      tagsInfo: {
        subjectID: '',
        tagName: '',
        subjectName: ''
      },
      rules: {
        subjectID: [
          { required: true, trigger: 'blur', message: '请选择所属学科！' }
        ],
        tagName: [
          { required: true, trigger: 'blur', message: '请输入目录名称！' }
        ]
      },
      subjectInfo: {
        page: 1,
        pagesize: 100
      },

      subjectList: [] // 学科列表
    }
  },
  created () {
    this.getTagsList()
    this.getSubjectList()
  },
  methods: {
    // 清空表单内容
    resetForm () {
      this.tagsSearch = {
        tagName: '',
        state: ''
      }
      this.$refs.formData.resetFields()
      this.getTagsList()
    },
    // 获取数据列表
    async getTagsList () {
      if (this.tagsSearch.tagName === '' && this.tagsSearch.state === '') {
        this.tagsPage.subjectID = this.subjects.id || null
        var { data } = await list(this.tagsPage)
      } else if (
        this.tagsSearch.tagName !== '' &&
        this.tagsSearch.state === ''
      ) {
        var { data } = await list(
          {
            tagName: this.tagsSearch.tagName
          },
          this.tagsPage
        )
      } else {
        var { data } = await list(this.tagsSearch, this.tagsPage)
      }
      // console.log(data);
      this.tagsList = data.items
      this.tagsPage.total = data.counts
      this.pageLength = data.items.length
    },
    // 删除标签
    async deleteArticle (row) {
      try {
        await this.$confirm('是否确认删除?', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove(row)
        if (this.pageLength === 1) {
          this.tagsPage.page--
        }
        this.getTagsList()
        this.$message.success('操作成功！')
      } catch (err) {
        console.log(err)
        this.$message('操作失败，请稍后重试！')
      }
    },
    // 改变tag状态
    async changeState (row) {
      try {
        if (row.state === 1) {
          this.newState = 0
        } else {
          this.newState = 1
        }
        await changeState({
          id: row.id,
          state: this.newState
        })
        this.$message.success('操作成功！')
        this.getTagsList()
      } catch (err) {
        console.log(err)
        this.$message.fail('操作失败，请稍后重试！')
      }
    },
    // 获取学科列表
    async getSubjectList () {
      const { data } = await subjectList(this.subjectInfo)
      this.subjectList = data.items
      // console.log(this.subjectList);
    },
    // 编辑标签内容
    async editTags (row) {
      // console.log(row.id);
      this.dialogVisible = true
      const { data } = await detail(row)
      this.tagsInfo = data
      // console.log(data);
    },
    // 关闭弹窗
    handleClose () {
      this.dialogVisible = false
      this.tagsInfo = {
        subjectID: '',
        tagName: ''
      }
      this.$refs.tagsInfo.resetFields()
    },
    // 分页
    changePage (current) {
      this.tagsPage.page = current
      this.getTagsList()
    },
    // 提交表单
    async btnOk () {
      await this.$refs.tagsInfo.validate()
      try {
        await this.$confirm('是否确认操作?', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        })
        if (this.tagsInfo.id) {
          await update(this.tagsInfo)
        } else {
          await add(this.tagsInfo)
        }
        this.getTagsList()
        this.dialogVisible = false
      } catch (err) {
        console.log(err)
      }
    },
    // 格式化时间
    formateTime (row, column, cellValue, index) {
      const time = dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
      return time
    },
    // 格式化状态
    formateState (row, column, cellValue, index) {
      return cellValue === 1 ? '已启用' : '已禁用'
    }
  },
  // 获取地址栏数据
  computed: {
    subjects () {
      return this.$route.query || null
    }
  },

  // 侦听地址栏数据
  watch: {
    '$route.query' () {
      this.getTagsList()
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  margin: 10px;
}
.el-select {
  width: 100% !important;
}
.el-form-item.el-form-item--small {
  padding-left: 30px;
}
.el-breadcrumb {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}
</style>
